<template>
    <div>
        <div class="main-head flex-between container-fluid">
            <div class="title">
                <h1 v-text="$t('pro.history.historyName')"></h1>
            </div>
            <a-radio-group v-model="rdChecked" buttonStyle="solid" @change="handleCheckedChange">
                <a-radio-button
                        v-for="(value,key) in radios"
                        :key="key"
                        :value="value[0]"
                >{{value[1]}}</a-radio-button>
            </a-radio-group>
        </div>
        <div class="content container-fluid datatitle">
            <div class="portlet">
                <div class="tools">
                    <a-button type="primary" @click="FilerList" style="margin-right: 10px;" v-text="$t('pro.history.buttonBack')">
                    </a-button>
                    <a-range-picker
                        class="range"
                        :defaultValue="[$moment(datePickerDefaultValue[0], dateFormat), $moment(datePickerDefaultValue[1], dateFormat)]"
                        :format="dateFormat"
                        @change="handleDatePickerChange"
                        showToday
                        v-if="showDatePicker"
                    />
                    <span v-else class="datatext">
                        {{period[0].format('MMMDo')}} - {{period[1].format('MMMDo')}}
                    </span>
                </div>
            </div>
        </div>

        <div class="content container-fluid table">
            <div class="portlet">
                <div class="tools">
                    <div class="tools"></div>
                    <template v-if="empty">
                        <p class="empty" v-text="$t('pro.history.emptyMessage')">
                        </p>
                    </template>
                    <template v-else>
                        <a-table
                            size="small"
                            bordered
                            :dataSource="data"
                            :columns="columns"
                            :loading="loading"
                            :pagination="false"
                        >
                            <a slot="description" slot-scope="text" href="javascript:;">
                                <a-button type="primary" @click="handleDetail(text)" v-text="$t('pro.history.details')">
                                </a-button>
                            </a>
                        </a-table>
                        <a-pagination
                            class="pagination"
                            showSizeChanger
                            showQuickJumper
                            :pageSizeOptions="pageSizeOptions"
                            :pageSize="pagination.size"
                            :total="pagination.total"
                            v-model="pagination.current"
                            @showSizeChange="handleShowSizeChange"
                            @change="handlePageChange"
                        >
                        </a-pagination>
                    </template>
                    <!--说明历史纪录明细的弹出框-->
                    <a-modal
                        title="Details"
                        v-model="modalVisible"
                        :okText="$t('pro.public.buttonYes')"
                        @ok="handleClose"
                        @cancel="handleClose"
                        :cancelText="$t('pro.public.buttonClose')"
                        keyboard>
                        <a-table
                            :dataSource="detailsData"
                            :columns="details"
                            :pagination="false"
                        >
                        </a-table>
                    </a-modal>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                empty: false, //判断是否有数据
                modalVisible:false,//控制历史明细弹出框的显示
                loading: false, //页面是否加载
                pagination: {
                    size: 10,
                    current: 1,
                    total:10
                }, //分页器
                pageSizeOptions: ['10','20','30'],  //分页下拉列表
                radios: new Map(this.$t('pro.public.radiosDate')),
                rdChecked: 'day',
                showDatePicker: false,
                dateFormat: 'YYYY-MM-DD',
                data: [
                    {
                        key: "0",
                        data: '2019-06-25 03:03:13',
                        User: "John Dou (#13)",
                        action: "Create",
                        object: "Filter List",
                        fields: "User, List Name, id"
                    }
                ],
                detailsData:[
                    {
                        key: "0",
                        field: 'User',
                        to: "13",
                    },
                    {
                        key: "1",
                        field: 'List Name',
                        to: "123",
                    },
                    {
                        key: "2",
                        field: 'id',
                        to: "2908",
                    }
                ]
            }
        },
        methods: {
            FilerList() {//返回父页面
                this.$router.push({
                    path: '/bidder/filterlist',
                })
            },
            //改变展示页面条数的事件
            handleShowSizeChange(current, pageSize) {
                this.pagination.size = pageSize
            },
            //改变页数的事件
            handlePageChange(page, pageSize) {
                this.pagination.size = pageSize
                this.pagination.current = page
            },
            //查看历史明细
            handleDetail(){
                this.modalVisible = true
            },
            //关闭历史明细
            handleClose(){
                this.modalVisible = false
            },
            // 应在 handleCheckedChange && handleDatePickerChange 分别执行查询相关的数据的请求操作
            handleCheckedChange() {
                this.showDatePicker = this.rdChecked === 'custom'
                if (!this.showDatePicker) {
                    this.rdCheckedWithoutCustom = this.rdChecked
                }
            },
            handleDatePickerChange(value, mode) {
                console.log(value);
            },

            onChange(value, dateString) {//日期改变的事件
                console.log('Selected Time: ', value);
                console.log('Formatted Selected Time: ', dateString);
            },
            onOk(value) {//点击确定时间的事件
                console.log('onOk: ', value);
            }
        },
        computed:{
            // 这里处理预设日期范围（Today，This week...）期限内的第一天和最后一天
            period() {
                const firstday = this.$moment().startOf(this.rdChecked)
                const lastday = this.$moment().endOf(this.rdChecked)
                return [firstday,lastday]
            },
            // 用户需自定义日期期限时，DatePicker的默认值
            datePickerDefaultValue() {
                const firstday = this.$moment().startOf(this.rdCheckedWithoutCustom)
                const lastday = this.$moment().endOf(this.rdCheckedWithoutCustom)
                return [firstday,lastday]
            },
            columns(){
                return this.$t('pro.history.columns')
            },
            details(){
                return this.$t('pro.history.detailsData')
            }
        }
    }
</script>

<style scoped>
    .ant-modal-body{
        height: 290px;
    }
    .title{
        margin-bottom: 20px;
    }
    .range {
        float: right;
        text-align: right;
    }
    .datatext{float: right}
    .pagination{
        text-align: right;
        margin-top: 1rem;
    }
    .datatitle{
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .table{
        padding-top: 10px
    }
</style>
